<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>

    <style>
        /*p{*/
        /*    background: lightpink;*/
        /*}*/

    /*  层次选择器  */

    /*  后代选择器  */
    /*    ul li{*/
    /*        background: lightpink;*/
    /*    }*/

    /*  子选择器  */
    /*    body>p{*/
    /*        background: lightpink;*/
    /*    }*/

    /*  相邻兄弟选择器：只有一个，相邻（向下）  */
    /*    .active+p{*/
    /*        background: lightpink;*/
    /*    }*/
    /*    .rose+p{*/
    /*        background: lightpink;*/
    /*    }*/

    /*  通用兄弟选择器：当前选中元素的向下的所有兄弟元素  */
        .active~p{
            background: lightpink;
        }
        .rose~p{
            background: darkorange;
        }
        .tom~li{
            background: blueviolet;
        }

    </style>

</head>
<body>

    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li class="tom">
            <p class="rose">p4</p>
            <p>pppp</p>
        </li>

        <li>
            <p>p5</p>
        </li>

        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>

</body>
</html>